<template>
    <div class="body_background">
        <!--搜索框-->
        <div class="search-box">
            <div class="search-input-box">
                <img src="../../assets/img/search.png" class="search-img">
                <input class="keyword main-color" placeholder="请输入关键词" v-model="keyword">
            </div>
            <mt-button class="background white-color" size="small" @click="getKeywordFun">搜索</mt-button>
        </div>
        <!--筛选-->
        <div class="select-box">
            <select v-model="classSelected" @change="getSelected">
                <option :value="item.id" v-for="item in goodsClass">{{item.name}}</option>
            </select>
            <select v-model="typeSelected" @change="getSelected">
                <option :value="item.id" v-for="item in goodsType">{{item.name}}</option>
            </select>
            <select v-model="modeSelected" @change="getSelected">
                <option :value="item.id" v-for="item in storageMode">{{item.name}}</option>
            </select>
        </div>
        <!--商品列表-->
        <div class="goods-list-box" :style="GetWindowHeight">
            <ul class="order-list-box">
                <li v-for="(item,index) in goodsList" :key="item.id"
                    @click="goStockGoodsDetail(item)"
                >
                    <div class="order-content-box">
                        <img :src="item.imgUrl"/>
                        <div class="order-info-box">
                            <div class="main-color big-font-size">商品名称</div>
                            <div class="goods-content">
                                <div>
                                    <div class="three-color small-font-size">供应商：菜市场</div>
                                    <div class="three-color small-font-size">分类：蔬菜</div>
                                    <div class="three-color small-font-size">规格：200g</div>
                                </div>
                                <div class="light-color small-font-size goods-count">
                                    库存:<span class="font-size16 price-color">20</span>袋
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="seize-seat">-- 没有数据了 --</div>
        </div>
        <div class="body_background create-button-box">
            <mt-button class="width28 background middle-font-size white-color"
                       @click="goWarehoueCreate"
            >入库
            </mt-button>
            <mt-button class="width28 middle-font-size background white-color"
                       @click="goDeliveryGoods"
            >出库
            </mt-button>
            <mt-button class="width28 middle-font-size background white-color"
                       @click="goStockInventory"
            >盘点
            </mt-button>
        </div>

    </div>
</template>

<script>
    import {Toast} from 'mint-ui';

    export default {
        name: "StockGoodsManage",
        data() {
            return {

                keyword: '',
                GetWindowHeight: {//列表的高度
                    'height': ''
                },
                goodsList: [
                    {
                        id: 1,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    },{
                        id: 2,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }
                ], //商品数据
                couponList: [
                    {
                        id: '1',
                        name: '技术部'
                    },
                    {
                        id: '2',
                        name: '财务部'
                    }
                ],
                goodsClass: [{id: 1, name: '商品分类'}],
                goodsType: [{id: 1, name: '商品类型'}],
                storageMode: [{id: 1, name: '存储方式'}],
                classSelected: '',
                typeSelected: '',
                modeSelected: '',
            }
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getHeight) // 注册监听器
            this.getHeight() // 页面创建时先调用一次
            //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
            this.classSelected = this.goodsClass[0].id;
            this.typeSelected = this.goodsType[0].id;
            this.modeSelected = this.storageMode[0].id;
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getHeight)
        },
        methods: {

            //库存商品详情
            goStockGoodsDetail(){
                this.$router.push('/StockGoodsDetail')
            },

            //获取选中
            getSelected() {
                console.log(this.couponSelected)
            },
            //入库
            goWarehoueCreate(){
                this.$router.push('/WarehoueCreate')
            },
            //出库
            goDeliveryGoods(){
                this.$router.push('/AddDeliveryGoods')
            },
            //盘点
            goStockInventory(){
                this.$router.push('/StockInventoryList')
            },

            //搜索
            getKeywordFun() {
                let keyword = this.keyword;
                console.log(keyword)
            },

            getHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowHeight.height = window.innerHeight - 165 + 'px'
            },
        },
    }
</script>

<style lang="scss" scoped>

    .search-box {
        background: #fff;
        width: 90%;
        height: 35px;
        padding: 20px 5% 10px 5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search-input-box {
            width: 80%;
            height: 35px;
            border-radius: 6px;
            background: #f8f7fc;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .search-img {
            width: 16px;
            height: 16px;
            margin-left: 20px;
        }
        .keyword {
            font-size: 14px;
            padding: 5px 10px;
            background: transparent;
            border: none;
            outline: none;
            list-style: none;
        }

    }

    /*商品列表*/
    .goods-list-box {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 500px;
        overflow-y: auto;
        .order-list-box {
            width: calc(100% - 20px);
            height: auto;
            padding: 10px 0;
            border: 10px solid #f5f6fa;
            background: #fff;
            li {
                width: calc(100% - 30px);
                background: #fff;
                padding: 0 15px;
                border-radius: 4px;
                .type {
                    width: 100%;
                    text-align: left;
                    padding-bottom: 5px;
                }
                .order-content-box {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    padding: 5px 0;
                    img {
                        width: 60px;
                        height: 60px;
                        margin-right: 10px;
                        border-radius: 6px;
                    }
                    .goods-content {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                    }
                    .order-info-box {
                        width: calc(100% - 70px);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        text-align: left;
                    }
                    .goods-count {
                        margin-left: auto;
                        margin-top: 10px;
                    }
                }

            }
        }
    }
    .create-button-box {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-around;
        position: fixed;
        bottom: 0px;
        .width28 {
            width: 28%;
            height: 35px;
            margin-top: 15px;
            border-radius: 6px;
        }
    }

    .mint-button--small {
        display: inline-block;
        padding: 0 10px;
        height: 26px;
        margin-left: 10px;
    }

    .select-box {
        width: 100%;
        height: 30px;
        background: #fff;
        display: flex;
        justify-content: space-around;
        select {
            border: none;
            outline: none;
        }
    }

</style>